<template>
  <div 
    class="advanced-card" 
    :class="{
      'advanced-card--clickable': clickable,
      'advanced-card--hoverable': hoverable,
      'advanced-card--shadow': shadow,
      [`advanced-card--${effect}`]: effect
    }"
    @click="handleClick"
  >
    <div v-if="$slots.header" class="advanced-card__header">
      <slot name="header"></slot>
    </div>
    <div class="advanced-card__body">
      <slot></slot>
    </div>
    <div v-if="$slots.footer" class="advanced-card__footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

defineProps({
  clickable: {
    type: Boolean,
    default: false
  },
  hoverable: {
    type: Boolean,
    default: true
  },
  shadow: {
    type: Boolean,
    default: true
  },
  effect: {
    type: String,
    default: 'float', // float, lift, glow
    validator: (value) => ['float', 'lift', 'glow'].includes(value)
  }
})

const emit = defineEmits(['click'])

const handleClick = (event) => {
  emit('click', event)
}
</script>

<style scoped>
.advanced-card {
  background: var(--color-white);
  border-radius: var(--border-radius-large);
  overflow: hidden;
  transition: var(--transition-base);
  position: relative;
}

.advanced-card--shadow {
  box-shadow: var(--box-shadow-base);
}

.advanced-card--clickable {
  cursor: pointer;
}

.advanced-card--hoverable:hover {
  box-shadow: var(--box-shadow-dark);
}

.advanced-card--float:hover {
  transform: translateY(-5px);
}

.advanced-card--lift:hover {
  transform: scale(1.02);
}

.advanced-card--glow:hover {
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.advanced-card__header {
  padding: var(--spacing-medium);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text-primary);
}

.advanced-card__body {
  padding: var(--spacing-medium);
}

.advanced-card__footer {
  padding: var(--spacing-medium);
  border-top: 1px solid var(--color-border);
  background-color: #f8f9fa;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .advanced-card__header {
    padding: var(--spacing-small);
  }
  
  .advanced-card__body {
    padding: var(--spacing-small);
  }
  
  .advanced-card__footer {
    padding: var(--spacing-small);
  }
}
</style>